<template>
    <el-container title="123">
        <el-main title="123">
            <!--            <div style=" text-align: right; z-index: 999; position: absolute; right: 20px; top: 73px;">-->
            <!--                <el-button size="mini" type="primary" icon="el-icon-arrow-left"-->
            <!--                           @click="getParentDetails(indexs -1)">-->
            <!--                    上一条-->
            <!--                </el-button>-->
            <!--                <el-button size="mini" type="primary"-->
            <!--                           @click="getParentDetails(indexs +1)">-->
            <!--                    下一条<i class="el-icon-arrow-right el-icon&#45;&#45;right" />-->
            <!--                </el-button>-->
            <!--            </div>-->
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>车牌号:{{form.plateNo}}</span>
                </div>
                <div slot="header" class="clearfix">
                    <span>基本信息</span>
                </div>
                <div class="text item">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
                        <el-row>
                            <el-col :span="8">
                                <el-row>
                                    <el-col :span="10"><span style="float: right;">违章情况：</span></el-col>
                                    <el-col :span="14">
                                        <remote-dict-select v-model="form.illegalCondition"
                                                            :name.sync="form.illegalCondition" dict="illegal-condition"
                                                            :disabled="show || personInfoUnable" :clearable="false"
                                                            @platform_type="getIllegalConditionIndex"/>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="8">
                                <el-row>
                                    <el-col :span="10"><span style="float: right;">货物名称：</span></el-col>
                                    <el-col :span="14">
                                        <el-input v-if="!show" v-model="form.goodsName" class="case-input"
                                                  :disabled="show || personInfoUnable"
                                                  placeholder="请输入货物名称"/>
                                        <span v-if="show">{{ form.goodsName }}</span>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="8">
                                <el-row>
                                    <el-col :span="10"><span style="float: right;">运输情况：</span></el-col>
                                    <el-col :span="14">
                                        <el-input v-if="!show" v-model="form.legalRepresentative" class="case-input"
                                                  :disabled="show || personInfoUnable"
                                                  placeholder="请输入运输情况"/>
                                        <span v-if="show">{{ form.legalRepresentative }}</span>
                                    </el-col>
                                </el-row>
                            </el-col>
<!--                            <el-col :span="8">-->
<!--                                <el-row>-->
<!--                                    <el-col :span="10"><span style="float: right;">车辆类型：</span></el-col>-->
<!--                                    <el-col :span="14">-->
<!--                                        <el-select v-if="!show" v-model="form.vehicleTypeName" placeholder="请选择"-->
<!--                                                   :disabled="show || personInfoUnable">-->
<!--                                            <el-option-->
<!--                                                v-for="item in typeOptions"-->
<!--                                                :key="item.value"-->
<!--                                                :label="item.label"-->
<!--                                                :value="item.value"/>-->
<!--                                        </el-select>-->
<!--                                        &lt;!&ndash;                                    <el-form-item label="车辆类型" prop="vehicleType">&ndash;&gt;-->
<!--                                        &lt;!&ndash;                                        <remote-dict-select v-model="form.vehicleType" :clearable="false" dict="vehicleType" />&ndash;&gt;-->
<!--                                        &lt;!&ndash;                                    </el-form-item>&ndash;&gt;-->
<!--                                        &lt;!&ndash;                                    <span v-if="show">{{form.vehicleType}} </span>&ndash;&gt;-->
<!--                                    </el-col>-->
<!--                                </el-row>-->
<!--                            </el-col>-->
                        </el-row>
                    </el-form>
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>驾驶员信息</span>
                </div>
                <div class="text item">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right; color: red;">* 驾驶员姓名：</span></el-col>
                                <el-col :span="8">
<!--                                    <el-row>-->
<!--                                        <el-form-item prop="driverName">-->
<!--                                            <el-input v-model="form.driverName" placeholder="请输入用户名"-->
<!--                                                      :disabled="show || personInfoUnable"/>-->
<!--                                        </el-form-item>-->
                                        <!--                                </el-col>-->
<!--                                    </el-row>-->
                                    <el-input v-if="!show" v-model="form.driverName" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入驾驶员姓名"/>
                                    <span v-if="show">{{ form.driverName }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right; color: red;">* 身份证号：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.driverIdcard" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入身份证号"/>
                                    <span v-if="show">{{ form.driverIdcard }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right; color: red;">* 从业资格证证号：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.qualifyCertNo" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入从业资格证证号"/>
                                    <span v-if="show">{{ form.qualifyCertNo }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right; color: red;">* 道路运输证号：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.roadTransportNo" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入道路运输证号"/>
                                    <span v-if="show">{{ form.roadTransportNo }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right; color: red;">* 联系电话：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.contactWay" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入联系电话"/>
                                    <span v-if="show">{{ form.contactWay }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right; color: red;">* 车辆所属运输企业：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.transportEnterpriseName" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入车辆所属运输企业"/>
                                    <span v-if="show">{{ form.transportEnterpriseName }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right;">性别：</span></el-col>
                                <el-col :span="14">
                                    <el-select v-if="!show" v-model="form.driverSex" placeholder="请选择"
                                               :disabled="show || personInfoUnable">
                                        <el-option
                                            v-for="item in genderOptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"/>
                                    </el-select>
                                    <span v-if="show">{{ form.driverSex }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right;">年龄：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.driverAge" :controls="false"
                                              class="case-input" :disabled="show || personInfoUnable"
                                              placeholder="请输入年龄" text-align="left"/>
                                    <span v-if="show">{{ form.driverAge }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right;">联系地址：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.contactAddress" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="请输入联系地址"/>
                                    <span v-if="show">{{ form.contactAddress }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right;">单位注册地址：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.registeredAddr" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="单位注册地址"/>
                                    <span v-if="show">{{ form.registeredAddr }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right;">单位职务：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.appointment" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="单位职务"/>
                                    <span v-if="show">{{ form.appointment }}</span>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="8">
                            <el-row>
                                <el-col :span="10"><span style="float: right;">单位邮编：</span></el-col>
                                <el-col :span="14">
                                    <el-input v-if="!show" v-model="form.postCode" class="case-input"
                                              :disabled="show || personInfoUnable"
                                              placeholder="单位邮编"/>
                                    <span v-if="show">{{ form.postCode }}</span>
                                </el-col>
                            </el-row>
                        </el-col>


<!--                        </el-row>-->
                    </el-form>
                </div>
            </el-card>
            <el-row :gutter="8">
                <el-col :span="15" :offset="9">
                    <el-row>
                        <el-col :span="24">
                            <div style=" text-align: right; right: 1px;">
                                <el-button size="small" type="primary" :loading="isLoading" :style="{ display: visibleLine }" @click="insert">确定
                                </el-button>
                                <el-button size="small" type="primary" @click="cancelEstablishingCase">取消</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

<script>
    // import {UpdateBasicInformation, InsertBasicInformation} from '@/api/overrunPenaltyApi';
    import {InsertEntrance, GetArchiveEntrance} from '@/api/parkUnloadApi';
    import moment from 'moment';
    import RemoteDictSelect from '@/modules/components/DictSelect/RemoteDictSelect';

    export default {
        name: 'entranceInformation',
        model: {
            prop: 'value',
            event: 'change'
        },
        components: {
            RemoteDictSelect
        },
        props: {
            information: Object,
            entranceDate: Object,
            visibleLine: Object,
            // deviceType: Object,
            // 当前返回list的条数
            tableSize: Number,
            // 当前选中列在数据中的下标值
            indexs: Number,
            // 当前页
            currentPage: Number,
            // 当前查询的数据的总条数(分页的总数)
            total: Number,
            isAdd: {
                type: Boolean,
                default: false
            },
            show: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                radio: '',
                unitInfoUnable: false,
                isLoading: false,
                // visibleLine:'',
                personInfoUnable: false,
                form: {
                    illegalType: '',
                    driverName: '',
                    goodsName: '',
                    vehicleType: '',
                    driverSex: '',
                    driverAge: '',
                    contactWay: '',
                    driverIdcard: '',
                    contactAddress: '',
                    qualifyCertNo: '',
                    roadTransportNo: '',
                    transportEnterpriseName: '',
                    legalRepresentative: '',
                    registeredAddr: '',
                    appointment: '',
                    postCode: '',
                    illegalCondition: '',

                },
                rules: {
                    driverName: [
                        {required: true, message: '用户名不能为空', trigger: 'change'}
                    ],
                },
                // form :[],
                genderOptions:
                    [{
                        value: '男',
                        label: '男'
                    }, {
                        value: '女',
                        label: '女'
                    }],
                typeOptions:
                    [{
                        // id: '0',
                        value: '0',
                        label: '转运车辆'
                    }, {
                        // id: '1',
                        value: '1',
                        label: '超限车辆'
                    }]
            };
        },
        computed: {},
        watch: {
            // information(newValue, oldValue) {
            //     this.form = newValue;
            //     // this.radio = '';
            //     this.unitInfoUnable = false;
            //     this.personInfoUnable = false;
            //     this.queryParams = {
            //         CurrentPage: 1
            //     };
            // }
            entranceDate(newValue, oldValue) {
                this.form = newValue;
                // this.radio = '';
                this.initForm();
                this.unitInfoUnable = false;
                // this.personInfoUnable = false;
                this.queryParams = {
                    CurrentPage: 1
                };
            },

        },
        mounted() {
            this.initForm();
        },
        methods: {
            moment,
            initForm() {
                // debugger
                this.personInfoUnable = false;
                this.form = this.entranceDate[0];
                if (this.form.driverName != null) {
                    this.personInfoUnable = true;
                    // this.visibleLine = 'none';
                }
                // debugger
                console.log("查看form");
                console.log(this.form);

            },
            getIllegalConditionIndex(index) {

            },
            insert() {
                // this.personInfoUnable = true;
                this.isLoading = true;
                var param = {
                    ...this.form
                };
                // param.entranceId = this.entranceDate[0].entranceId;
                if (param.vehicleTypeName == '1') {
                    param.vehicleType = 1
                } else if (param.vehicleTypeName == '0') {
                    param.vehicleType = 0
                }
                if (param.driverName != null  && param.driverIdcard != null && param.qualifyCertNo != null && param.roadTransportNo != null && param.contactWay != null && param.transportEnterpriseName != null) {
                    console.log("查看参数param");
                    console.log(param);
                    InsertEntrance(param).then(res => {
                        this.isLoading = false;
                        this.$emit('cancelEstablishingCase', false);
                        if (res.status == '0' || res.res.InsertEntrance == 'Success') {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                        }
                    }).catch(err => {
                        console.log(err);
                        this.isLoading = false;
                    });
                } else {
                    this.isLoading = false;
                    // this.$emit('cancelEstablishingCase', false);
                    this.$message({
                        message: '未填入必填项',
                        type: 'error'
                    });
                }


            },

            getParentDetails(index) {
                console.log(index);
                debugger;
                if (index < 0) {
                    if (this.currentPage == 1) {
                        this.$message({
                            message: '已是第一条',
                            type: 'warning'
                        });
                        return false;
                    } else {
                        this.$emit('getList', this.currentPage - 1);
                        index = 0;
                        setTimeout(() => {
                            this.$emit('handleView', index);
                        }, 1000);
                    }
                }
                if (this.tableSize == index) {

                    if (((this.currentPage - 1) * 20 + index + 1) > this.total) {
                        this.$message({
                            message: '已是最后一条',
                            type: 'warning'
                        });
                        return false;
                    } else {
                        this.$emit('getList', this.currentPage + 1);
                        index = 0;
                        setTimeout(() => {
                            this.$emit('handleView', index);
                        }, 1000);
                        return false;
                    }
                }
                this.$emit('handleView', index);
            },
            isBlank(str) {
                return !this.isNotBlank(str);
            },
            isNotBlank(str) {
                if (str != null && str != undefined && str != '' & str != ' ') {
                    return true;
                }
                return false;
            },
            cancelEstablishingCase() {
                console.log("quxiao");
                this.$emit('cancelEstablishingCase', false);
            },
        }
    };
</script>

<style scoped>
    span {
        line-height: 30px;
    }
    >>> .el-input__icon {
        line-height: 30px;
    }
    >>> * {
        font-size: 14px;
    }
    >>> .el-textarea__inner {
        height: 100%;
    }
    >>> .el-tabs--border-card {
        -webkit-box-shadow: none !important;
    }
    >>> .el-card.is-always-shadow,
    >>> .el-card.is-hover-shadow:focus,
    >>> .el-card.is-hover-shadow:hover {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    >>> .el-button--mini,
    >>> .el-button--mini.is-round {
        padding: 7px 5px;
    }
    .case-input {
        width: 193px;
    }
    >>> .el-input__inner {
        height: 25px !important;

        /* padding: 0; */
    }
    .row-plate {
        margin-bottom: 5px;
    }
    .el-row {
        /* margin-bottom: 15px; */
        height: 40px;
    }
    .el-col {
        border-radius: 4px;
    }
    >>> .el-card__header {
        height: 40px;
        padding: 10px 10px;
    }
    >>> .el-card__body {
        padding: 5px;
    }
    .el-card {
        margin-bottom: 5px;
    }
    .el-main {
        padding: 0 5px;
    }
    .el-select {
        width: 193px;
    }
</style>
